<template>
  <n-form
    :model="config"
    label-placement="left"
    label-width="auto"
    require-mark-placement="right-hanging"
    size="small"
  >
    <n-form-item label="文本">
      <n-input v-model:value="config.text" @update:value="updateConfig" />
    </n-form-item>
    <n-form-item label="宽度">
      <n-input-number
        v-model:value="config.width"
        @update:value="updateConfig"
      />
    </n-form-item>
    <n-form-item label="高度">
      <n-input-number
        v-model:value="config.height"
        @update:value="updateConfig"
      />
    </n-form-item>
    <!-- <n-form-item label="背景色">
      <n-color-picker
        v-model:value="config.backgroundColor"
        @update:value="updateConfig"
      />
    </n-form-item>
    <n-form-item label="文字颜色">
      <n-color-picker
        v-model:value="config.textColor"
        @update:value="updateConfig"
      />
    </n-form-item> -->
  </n-form>
</template>

<script setup>
import { ref, watch, defineProps } from "vue";

const props = defineProps({
  selected: {
    type: Object,
    default: () => ({}),
  },
});

const config = ref(props.selected.config);

function updateConfig() {
  props.selected.updateConfig(config.value);
}

watch(
  () => props.selected,
  (newVal) => {
    config.value = newVal.config;
  },
  { deep: true }
);
</script>
